<template>
    <div class="list-box">
        <div class="pannel-title pannel-between">
            <div>菜单列表</div>
            <a-button class="pannel-btn" size="small" type="primary" shape="round" @click="addMenu()">
                <PlusCircleFilled />
                新增菜单
            </a-button>
        </div>
        <div class="line"></div>
        <div class="data-table">
            <a-table
                :columns="columns"
                :row-key="(record) => record.id"
                :data-source="dataSource"
                :pagination="false"
                :loading="isLoading"
            >
                <template #action="{record}">
                    <a v-if="record.position === 0" @click="addChildMenu(record)" title="新增子菜单" style="margin-right:5px;"><img src="@/assets/images/cz-add.png"/></a>
                    <a v-else-if="record.position === 1" @click="addChildMenu(record)" title="新增子权限" style="margin-right:5px;"><img src="@/assets/images/cz-add.png"/></a>
                    <a @click="editMenu(record)" title="编辑" style="margin-right:5px;"><img src="@/assets/images/cz-edit.png"/></a>
                    <a @click="deleteMenu(record)" title="删除"><img src="@/assets/images/cz-delete.png"/></a>
                </template>
            </a-table>
            <a-modal v-model:visible="visible" :maskClosable="false" :afterClose="closeModal">
                <h3 class="modal-title">{{ formState.id ? "修改菜单" : formState.parentId === 0 ? "新增菜单":formState.position === 1 ? "新增子菜单":"新增子权限" }}</h3>
                <div class="modal-form">
                    <a-form ref="form1" :model="formState" :rules="rules" :labelCol="{span:6,offset:0}">
                        <a-form-item label="菜单名称" name="name">
                            <a-input
                                v-model:value="formState.name"
                                placeholder="请输入菜单名称"
                            />
                        </a-form-item>
                        <a-form-item label="菜单路径" name="frontPath">
                            <a-input
                                v-model:value="formState.frontPath"
                                placeholder="请输入菜单路径"
                            />
                        </a-form-item>
                        <a-form-item label="菜单权限" name="path">
                            <a-input
                                v-model:value="formState.path"
                                placeholder="请输入菜单权限"
                            />
                        </a-form-item>
                        <a-form-item label="菜单图标" name="image">
                            <a-input
                                v-model:value="formState.image"
                                placeholder="请输入菜单图标"
                            />
                        </a-form-item>
                    </a-form>
                </div>
                <template #footer>
                    <div class="modal-btn">
                        <a-button type="default" shape="round" @click="closeModal">取消</a-button>
                        <a-button type="primary" shape="round" @click="confirm()">确定</a-button>
                    </div>
                </template>
            </a-modal>
        </div>
    </div>
</template>
<script>
import { PlusCircleFilled } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Modal,Button,Form,Input} from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
export default {
    components: {
        PlusCircleFilled,
        ATable: Table,
		AModal:Modal,
		AButton:Button,
		AForm:Form,
		AFormItem:Form.Item,
		AInput:Input,
    },
    setup() {
        const store = useStore();
        //text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
        store.dispatch("setBreadcrumb", {
            text: "系统设置 / 菜单管理",
            isBack: false,
        });
        const dataSource = ref([]);
        const columns = reactive([
            {
                title: "菜单名称",
                dataIndex: "name",
                key: "name",
            },
            {
                title: "菜单路径",
                dataIndex: "front_path",
                key: "front_path",
            },
            {
                title: "菜单权限",
                dataIndex: "path",
                key: "path",
            },
            {
                title: "菜单图标",
                dataIndex: "image",
                key: "image",
            },
            
            {
                title: "创建日期",
                dataIndex: "create_time",
                key: "create_time",
            },
            {
                title: "操作",
                key: "action",
                slots: { customRender: "action" },
            },
        ]);
        return {
            dataSource,
            columns,
            isLoading: ref(false),
            visible: ref(false),
        };
    },
    data() {
        return {
			formState:{
				id:"",
				parentId:"",
				position:"",
				name:"",
				image:"",
				path:"",
				frontPath:""
			},
            rules: {
                name:{
					required: true,
					message: "不能为空",
					trigger: "blur",
				},
            },
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.isLoading = true;
            httpRequest
                .post("getManagerPagePaths", {})
                .then((res) => {
                    this.dataSource = this.getMenuByTree(res.data);
                })
                .finally(() => {
                    this.isLoading = false;
                });
        },
		getMenuByTree(list){
			const array = list.filter(e=>e.parent_id === 0);
			const obj = {};
			list.forEach(e=>{
				obj[e.id] = e;
			});
			list.forEach(e=>{
				if(e.parent_id !== 0){
					if(obj[e.parent_id].children){
						obj[e.parent_id].children.push(e);
					}else{
						obj[e.parent_id].children=[e];
					}
					
				}
			});
			return array;
		},
        deleteMenu(item) {
            Modal.confirm({
                title: "系统提示",
                content: "确认删除当前菜单？",
                okText: "确认",
                cancelText: "取消",
                onOk: () => {
                    return new Promise((res) => {
                        httpRequest
                            .post("deleteManagerPagePath", { id: item.id })
                            .then(() => {
                                message.success("菜单删除成功");
                                this.getList();
                            })
                            .catch(() => {
                                message.warning({ content: "菜单删除失败", key: "error" });
                            })
                            .finally(() => {
                                this.isLoading = false;
                                res();
                            });
                    });
                },
            });
        },
        editMenu(item) {
			if(this.$refs.form1&&this.$refs.form1.resetFields){
				this.$refs.form1.resetFields();
			}
			this.formState = {
				id:item.id,
				parentId:"",
				position:"",
				name:item.name,
				image:item.image,
				path:item.path,
				frontPath:item.front_path
			};
            this.visible = true;
        },
        addMenu() {
			if(this.$refs.form1&&this.$refs.form1.resetFields){
				this.$refs.form1.resetFields();
			}
			this.formState = {
				id:"",
				parentId:0,
				position:0,
				name:"",
				image:"",
				path:"",
				frontPath:""
			}
            this.visible = true;
        },
		addChildMenu(item){
			if(this.$refs.form1&&this.$refs.form1.resetFields){
				this.$refs.form1.resetFields();
			}
			this.formState = {
				id:"",
				parentId:item.id,
				position:item.position+1,
				name:"",
				image:"",
				path:"",
				frontPath:""
			};
			this.visible = true;
		},
        confirm() {
            this.$refs.form1.validate().then(()=>{
                const url = this.formState.id ? "editManagerPagePath" : "createManagerPagePath";
                const msg = this.formState.id ? "修改成功" : "创建成功";
                httpRequest.post(url, this.formState).then(() => {
                    this.visible = false;
					this.getList();
                    message.success(msg);
                });
            })
 
        },
		closeModal(){
			this.visible = false;
		}
    },
};
</script>
<style lang="less" scoped>
.line {
    width: 100%;
    margin: 20px 0;
    border-top: 1px solid #eee;
}
.span-green {
    display: flex;
    align-items: center;
    &:before {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        margin-right: 5px;
        background: #14ce79;
    }
}
.span-red {
    display: flex;
    align-items: center;
    &:before {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        margin-right: 5px;
        background: #fe4e50;
    }
}
</style>
